<template>
  <div class="wrap">
    <div class="banner">
      <div class="L">
        <div class="portrait"></div>
        <div class="box">
          <div class="box1">
            <span class="sp1">许一诺</span>
            <span class="sp2">0101000</span>
          </div>
          <div class="box2">
            网络团队
            <span>丨</span>
            团队主管
          </div>
        </div>
      </div>
      <div class="R" @click="Ranking()">排行榜单</div>
    </div>
    <div class="Exhibition">
      <div class="title">相关系统</div>
      <ul>
        <li>
          <div class="li_L">
            <span>1.</span>
            移动工作平台
          </div>
          <div class="li_R"></div>
        </li>
        <li>
          <div class="li_L">
            <span>2.</span>
            移动工作平台
          </div>
          <div class="li_R"></div>
        </li>
        <li>
          <div class="li_L">
            <span>2.</span>
            移动工作平台
          </div>
          <div class="li_R"></div>
        </li>
        <li>
          <div class="li_L">
            <span>2.</span>
            移动工作平台
          </div>
          <div class="li_R"></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import addButton from '../components/add-button'
import iPhoneXBottomSetAside from "../../mixins/iphoneXBottomAside.js";
// import { mapState, mapMutations, mapActions } from 'vuex'
// 接口
import {} from "@/core/api/index";
import GLOBAL from "@/components/global_variable";
import Vue from "vue";
import { NoticeBar, Cell, Swipe, SwipeItem } from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(NoticeBar);
Vue.use(Cell);
export default {
  data() {
    return {};
  },
  created() {
    // minxing接口的方法
    document.addEventListener("deviceready", onDeviceReady, false); // 等待cordova加载
    let that = this;
    function onDeviceReady() {
      MXCommon.getCurrentUser(function (result) {
        console.log(result, "当前登录账号信息");
        GLOBAL.userId = result.login_name;
        GLOBAL.userName = result.name;
        // setTimeout(() => {

        // }, 10);
      });
    }
  },
  mixins: [iPhoneXBottomSetAside],
  methods: {
    // 进入排行榜
    Ranking() {
      this.$router.push({
        name: "RankingList",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 300px;
  background: url("../../assets/img1/B3团队信息@2x.png") no-repeat;
  background-size: 100%;
}
.banner {
  height: 260px;
  box-sizing: border-box;
  padding-left: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .L {
    width: 500px;
    box-sizing: border-box;
    margin-top: 50px;
    display: flex;
    .portrait {
      width: 150px;
      height: 150px;
      border-radius: 50%;
      background: #fff;
      margin-right: 20px;
    }
    .box1 {
      margin-top: 30px;
      .sp1 {
        font-family: PingFangSC-Medium;
        font-size: 30px;
        color: #ffffff;
        letter-spacing: 0;
        margin-right: 35px;
      }
      .sp2 {
        opacity: 0.33;
        background: #8759ff;
        border-radius: 20px;
        font-family: SourceHanSansCN-Normal;
        font-size: 30px;
        color: #ffffff;
        letter-spacing: 0;
        padding: 0 5px;
      }
    }
    .box2 {
      opacity: 0.7;
      font-family: SourceHanSansCN-Normal;
      font-size: 28px;
      color: #ffffff;
      line-height: 50px;
    }
  }
  .R {
    width: 130px;
    height: 50px;
    background: #ffe332;
    box-sizing: border-box;
    margin-top: 50px;
    border-radius: 100px 0 0 100px;
    line-height: 50px;
    text-align: center;
    font-family: SourceHanSansCN-Medium;
    font-size: 26px;
    color: #313754;
  }
}
.Exhibition {
  width: 100%;
  height: 1000px;
  background: #fff;
  border-radius: 40px 40px 0 0;
  box-sizing: border-box;
  padding: 40px 30px;
  .title {
    font-family: SourceHanSansCN-Medium;
    font-size: 34px;
    color: #313754;
    letter-spacing: 0;
    margin-bottom: 20px;
  }
  ul {
    background: #ffffff;
    box-shadow: 0 2px 15px 0 #d7e0f3;
    border-radius: 20px;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    li {
      width: 95%;
      height: 80px;
      border-bottom: 1px solid #eaeaea;
      line-height: 80px;
      display: flex;
      .li_L {
        width: 90%;
        font-family: SourceHanSansCN-Normal;
        font-size: 30px;
        color: #313754;
        letter-spacing: 0;
        span {
          opacity: 0.32;
          font-family: Impact;
          font-size: 40px;
        }
      }
      .li_R {
        width: 30px;
        height: 30px;
        background: url("../../assets/img1/查看我的数据右@2x.png") no-repeat;
        background-size: 15px 20px;
        margin-top: 30px;
      }
    }
    li:last-child {
      border: 0;
    }
  }
}
</style>
